<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>

    <div style="width: 50vw;margin:20px auto;">
        <button type="button" class="layui-btn layui-btn-primary layui-border-blue" id="addUserBtn">新增用户</button>
        <table id="user-table" lay-filter="userTable"></table>
    </div>

    <div id="user-edit" style="display: none">
        <form class="layui-form" action="" lay-filter="user-edit-form">
            <input type="text" name="id" value="" hidden/>
            <input type="text" name="version" value="" hidden/>
            <div class="layui-form-item" style="margin-top: 10px;">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="1" title="男">
                    <input type="radio" name="sex" value="0" title="女" checked>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">年龄</label>
                <div class="layui-input-inline">
                    <input type="text" name="age" required  lay-verify="required" placeholder="请输入年龄" autocomplete="off" class="layui-input">
                </div>
            </div>
        </form>
    </div>

    <div id="user-add" style="display: none">
        <form class="layui-form" action="" lay-filter="user-add-form">
            <input type="text" name="token" value="" hidden/>
            <div class="layui-form-item" style="margin-top: 10px;">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="1" title="男">
                    <input type="radio" name="sex" value="0" title="女" checked>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">年龄</label>
                <div class="layui-input-inline">
                    <input type="text" name="age" required  lay-verify="required" placeholder="请输入年龄" autocomplete="off" class="layui-input">
                </div>
            </div>
        </form>
    </div>

    <script type="text/html" id="user-oper">
        <a lay-event="edit" title=" 编辑"><i class="layui-icon">&#xe642;</i></a>
        <a lay-event="del" title="删除"><i class="layui-icon">&#xe640;</i></a>
    </script>

    <script type="text/html" id="user-sex">
        {{#
        var sex = {
        1: {title: '男'},
        0: {title: '女'}
        }[d.sex];
        }}
        <span>{{ sex.title }}</span>
    </script>

    <script src="/layui/layui.js"></script>
    <script>
        layui.use(['table','form'], function(){
            var table = layui.table
                ,$ = layui.$
                ,form = layui.form;

            var userTable = table.render({
                elem: '#user-table'
                ,url: '/user/list'
                ,page: false //开启分页
                ,cols: [[ //表头
                    {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                    ,{field: 'username', title: '用户名', width:180}
                    ,{field: 'sex', title: '性别', templet: '#user-sex',width:100}
                    ,{field: 'age', title: '年龄', width:80}
                    ,{field: 'counts', title: '更新次数', width:180,align:'center'}
                    ,{title: '操作', toolbar: '#user-oper', align: 'center'}
                ]]
                ,parseData: function (res) {
                    return {
                        "code": res.code === 200 ? 0 : res.code,
                        "count": res.data.total,
                        "data": res.data.rows
                    }
                }
            });

            table.on('tool(userTable)', function (obj) {
                var data = obj.data;
                if (obj.event === 'edit') {
                    layer.open({
                        type: 1,
                        content: $('#user-edit'),
                        btn: ['确定', '取消']
                        ,success: function(layero, index){
                            form.val("user-edit-form",{
                                "username":data.username,
                                "age": data.age,
                                "id": data.id,
                                "version": data.version
                            });
                            $("input:radio[name=sex][value="+data.sex+"]").prop("checked", true);
                            form.render();
                        },
                        yes: function(index, layero){
                            var data = form.val("user-edit-form");
                            $.ajax({
                                type: "PUT",
                                url: "/user/updateUser",
                                data: data,
                                dataType: "json",
                                success: function(res){
                                    if(res.status == '400'){
                                        layer.msg(res.message);
                                        return false;
                                    }
                                    layer.msg(res.message);
                                    userTable.reload();
                                }
                            });
                        }
                        ,btn2: function (index,layero) {
                            layer.close(index);
                        }
                    })
                }
                if (obj.event === 'del') {
                    $.ajax({
                        type: "DELETE",
                        url: "/user/delById/"+data.id,
                        dataType: "json",
                        success: function(res){
                            if(res.status == '400'){
                                layer.msg(res.message);
                                return false;
                            }
                            layer.msg(res.message);
                            userTable.reload();
                        }
                    });
                }
            });

            $(document).on('click',"#addUserBtn",function(){
                layer.open({
                    type: 1,
                    content: $('#user-add'),
                    btn: ['确定', '取消']
                    ,success: function(layero, index){
                        $.ajax({
                            type: "GET",
                            url: "/user/getToken",
                            async:false,
                            dataType: "json",
                            success: function(res){
                                form.val("user-add-form",{"token":res.data})
                            }
                        });
                        form.render();
                    },
                    yes: function(index, layero){
                        var data = form.val("user-add-form");
                        $.ajax({
                            type: "POST",
                            url: "/user/insertUser",
                            data: data,
                            dataType: "json",
                            success: function(res){
                                if(res.status == '400'){
                                    layer.msg(res.message);
                                    return false;
                                }
                                layer.msg(res.message);
                                userTable.reload();
                            }
                        });
                    }
                    ,btn2: function (index,layero) {
                        layer.close(index);
                    }
                })
            });
        });
    </script>
</body>
</html>